* {
   box-sizing: border-box;
}

body{
   font-family: sans-serif;
   background-color: pink;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: 100vh;
   margin: 0;
}

h1 {
   color: #fff;
}

.screen {
   cursor: pointer;
   width: 40%;
   background-color: #000 !important;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px;
}

.controls {
   background: #333;
   color: #fff;
   width: 40%;
   border-bottom-right-radius: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px;
   cursor: pointer;
}

.controls .fa-play {
    color: #28a745;
}

.controls .fa-stop {
    color: #dc3545;
}

.controls .fa-pause {
    color: #fff;
}

.controls .timestamp {
    color: #fff;
    font-weight: bold;
    margin-left: 10px;
}


.btn:focus {
   outline: 0;
}

@media (max-width: 800px) {
  .screen,
  .controls {
    width: 80%;
  }
}